/*
 * author: downey
 * version: 1.0.0
 * git: http://git.kekuming.xin/downey/downey-canvas-charts.git
 */
import Base from './base'

export default class Bar extends Base {

  /* 构造函数 */
  constructor(option = {}) {
    const parameter = {
      width: '70%',
      height: '50%',
      center: ['30%', '50%'],
      padding: [10, 0, 10, 0],
      data: [
        [120, 0, 60, 40, 200, 80, 180, 160],
        [0, 120, 60, 32, 100, 80, 250, 150],
      ],
      dataStyle: [
        {
          width: 12,
          color: [
            {offset: 1, color: 'rgba(200, 200, 23, 0)'},
            {offset: .95, color: 'rgba(206, 200, 18, 0.7)'},
            {offset: 0, color: 'rgba(206, 200, 18, 1)'},
          ]
        },
        {
          width: 12,
          color: [
            {offset: 1, color: 'rgba(64, 153, 215, 0)'},
            {offset: .95, color: 'rgba(27, 143, 250, .7)'},
            {offset: 0, color: 'rgba(64, 153, 215, 1)'},
          ]
        }
      ],
      xAxis: {
        show: true,
        data: ['4以下', '4-5', '5-6', '6-7', '7-8', '8-9', '9-10', '10以上'],
        unit: '(小时)',
        textStyle: {
          show: true,
          textAlign: 'center',
          color: 'rgba(230, 240, 238, .7)',
          offset: [0, 0],
        },
        lineStyle: {
          show: true,
          color: '#20527f',
        },
        splitLineStyle: {
          show: false,
          color: '#20527f',
        }
      },
      yAxis: {
        show: true,
        unit: '',
        textStyle: {
          show: true,
          textAlign: 'right',
          color: '#21A8E6',
          offset: [-15, 0]
        },
        lineStyle: {
          show: true,
          color: '#20527f'
        },
        splitLineStyle: {
          show: true,
          color: '#20527f'
        }
      },
      specialAxis: {
        w: 8,
        h: 8,
        yColor: '#81ABF1',
        xColor: [
          {offset: 0, color: 'rgba(155, 215, 253, 1)'},
          {offset: 1, color: 'rgba(0, 0, 0, 1)'},
        ]
      },
      sidesAxis: {
        show: true,
        lineWidth: 1,
        lineColor: '#3CA3E6',
        fillColor: 'transparent',
      }
    };

    super(option, parameter);
  }

  test() {
    // this.getGlobal(0, 0, 0, 0);

  }

  // 绘制逻辑
  drawLogic() {

    this.drawSidesAxis();

    this.drawYAxisSplit();
    this.drawSpecial();

    this.drawXAxisSplit();
    this.drawDataPillar();
  }

  // 计算数据
  getGlobal() {
    // x,y,w,h => p[1] , p[0] , w - p[1] - p[3] , h - p[0] - p[2]
    this.padding = this.extend([0, 0, 0, 0], this.padding);
    this.numX = (this.xAxis.data && this.xAxis.data.length) || 5;
    this.numY = (this.yAxis.data && this.yAxis.data.length) || 5;
    this.xSpace = (this.width - this.padding[1] - this.padding[3]) / this.numX;
    this.ySpace = (this.height - this.padding[0] - this.padding[2]) / this.numY;

    this.maxVal = this.getMax(this.data);

    this.dataXSpace = Math.ceil(this.maxVal / this.numX);
    this.dataYSpace = Math.ceil(this.maxVal / this.numY);

    // 实际数据宽度
    this.cW = this.dataXSpace * this.numX;
    this.cH = this.dataYSpace * this.numY;

    this.points = [];
    for (let j = 0; j < this.data.length; j++) {
      this.points.push([]);
      for (let i = 0; i < this.data[j].length; i++) {
        // maxVal / width = nowVal / x;
        // x = nowVal / (maxVal / width);
        // maxVal/maxDataWidth = x/this.width; 200/205=x/this.width;
        // x = this.width * (maxVal/maxDataWidth)
        // 横向数据样式
        this.points[j].push({
          x: this.xSpace * (i + 1) - this.xSpace / 2 + this.padding[3],
          y: this.data[j][i] / (this.maxVal / (this.height - this.padding[0] - this.padding[2])) + this.padding[2]
        });
        // TODO 竖向数据样式
      }
    }
  }

  // 画四边轴
  drawSidesAxis() {
    if (!this.sidesAxis.show) return this;
    let {lineWidth, lineColor, fillColor} = this.sidesAxis || {};
    this.ctx.beginPath();
    this.ctx.lineWidth = lineWidth;
    this.ctx.strokeStyle = lineColor;
    this.ctx.fillStyle = this.getColor(fillColor);

    // this.ctx.moveTo(0, 0);
    // this.ctx.lineTo(this.width, 0);
    // this.ctx.lineTo(this.width, this.height);
    // this.ctx.lineTo(0, this.height);
    // this.ctx.closePath();
    this.ctx.strokeRect(0, 0, this.width, this.height);
    this.ctx.fill();
    this.ctx.stroke();
    this.ctx.closePath();
  }

  // 画 | 分割轴X/坐标
  drawXAxisSplit() {
    // x ,y => o[0] , o[1]
    const offset = this.extend([0, 0], this.xAxis.textStyle.offset);
    this.ctx.beginPath();
    for (let i = 0; i < this.numX; i++) {
      let x = this.xSpace * (i + 1) - this.xSpace / 2;
      if (this.xAxis.splitLineStyle.show) {
        this.ctx.moveTo(x + this.padding[3], 0);
        this.ctx.lineTo(x + this.padding[3], this.height);
        this.ctx.lineWidth = this.xAxis.splitLineStyle.lineWidth || 1;
        this.ctx.strokeStyle = this.getColor(this.xAxis.splitLineStyle.color);
        this.ctx.setLineDash(this.xAxis.splitLineStyle.lineDash || [6, 6]);
      }
      if (this.xAxis.textStyle.show) {
        let {fontSize, textAlign, color} = {...this, ...this.xAxis.textStyle} || {};

        this.setFont(this.getColor(color), textAlign, fontSize);
        this.ctx.fillText(this.xAxis.data[i], x + this.padding[3] + offset[0], this.height + offset[1] + (this.xAxis.textStyle.fontSize || 14) + 2);

        if (i === this.numX - 1) {
          // X轴单位
          this.ctx.textAlign = 'left';
          this.ctx.fillText(this.xAxis.unit, this.width + offset[0], this.height + offset[1] + (this.xAxis.textStyle.fontSize || 14) + 2);
        }
      }
    }

    this.ctx.stroke();
    this.ctx.closePath();
    this.ctx.setLineDash([]);
  }

  // 画 — 分割轴Y/坐标
  drawYAxisSplit() {
    const offset = this.extend([0, 0], this.yAxis.textStyle.offset);
    this.ctx.beginPath();
    for (let i = 0; i <= this.numY; i++) {
      let y = this.ySpace * i;
      if (this.yAxis.splitLineStyle.show) {
        this.ctx.lineWidth = this.yAxis.splitLineStyle.lineWidth || 1;
        this.ctx.strokeStyle = this.getColor(this.yAxis.splitLineStyle.color);
        this.ctx.setLineDash(this.yAxis.splitLineStyle.lineDash || [6, 6]);

        this.ctx.moveTo(0, this.height - this.padding[2] - y);
        this.ctx.lineTo(this.width, this.height - this.padding[2] - y);
      }

      if (this.yAxis.textStyle.show) {
        let {fontSize, textAlign, color} = {...this, ...this.yAxis.textStyle} || {};

        this.setFont(this.getColor(color), textAlign, fontSize);

        this.ctx.save();
        this.ctx.translate(offset[0], offset[1]);
        this.ctx.fillText(this.dataYSpace * i, 0, this.height - this.padding[2] - y + (this.yAxis.textStyle.fontSize || 14) / 2 - 2);

        // Y轴单位
        if (i === this.numY) this.ctx.fillText(this.yAxis.unit, 0, -this.padding[2] - (this.yAxis.textStyle.fontSize || 14) - 2);

        this.ctx.restore();
      }
    }
    this.ctx.stroke();
    this.ctx.closePath();
    this.ctx.setLineDash([]);
  }

  // 画装饰轴
  drawSpecial() {
    let {lineWidth, yColor, xColor, w, h} = this.specialAxis;
    w = w || 8;
    lineWidth = lineWidth || 1;

    // | 线
    this.ctx.beginPath();
    this.ctx.lineWidth = lineWidth;
    this.ctx.strokeStyle = this.getColor(yColor);
    this.ctx.moveTo(-w, -h + this.padding[0]);
    this.ctx.lineTo(-w, (this.height - this.padding[0] - this.padding[2]) + h + this.padding[0]);
    this.ctx.stroke();
    this.ctx.closePath();

    // - 短线分割
    this.ctx.beginPath();
    for (let i = 0; i <= this.numY; i++) {
      let y = this.ySpace * i;
      this.ctx.moveTo(-w, y + this.padding[0]);
      this.ctx.lineTo(w, y + this.padding[0]);
    }

    // this.ctx.fillRect(-w, 0, w * 2, this.height);
    this.ctx.strokeStyle = this.getColor(xColor, [-w, 0, w * 2, 0]);

    this.ctx.stroke();
    this.ctx.closePath();
  }

  // 绘制数据柱子
  drawDataPillar() {
    // 间距=>双柱子及以上有效
    const pillarWidth = 12, gap = 4;

    this.ctx.save();
    if (this.data.length > 1) {
      this.ctx.translate(-(pillarWidth + gap) * (this.data.length - 1) / 2, 0);
    }
    this.data.forEach((v, k) => {
      let {width, color} = {...{width: pillarWidth, color: this.getColor()}, ...this.dataStyle[k]};
      this.ctx.save();
      if (k > 0) this.ctx.translate((pillarWidth + gap) * k, 0);
      this.drawPillar(this.points[k], width, color);
      this.ctx.restore();
    });
    this.ctx.restore();

    // TODO 单双曲线
  }

  // 绘制柱子单条
  drawPillar(mData = [], width = 12, color = []) {
    this.ctx.beginPath();
    const radius = width / 2;

    for (let i = 0; i < mData.length; i++) {
      let [x, y, w] = [
        mData[i].x,
        0,
        mData[i].y
      ];
      // 负不显示
      if (w < radius) {
        w = width;
      } else {
        this.ctx.arc(x + radius - width / 2, this.height - (w - radius), radius, 0, Math.PI * 2);
      }

      // this.ctx.beginPath();
      // this.ctx.lineWidth = width;
      // this.ctx.strokeStyle = this.getColor(color, [0, 0, 0, this.height]);
      // this.ctx.moveTo(x - width / 2, this.height);
      // this.ctx.lineTo(x - width / 2, this.height - (w - radius));
      // this.ctx.stroke();
      // this.ctx.closePath();

      this.ctx.rect(x - width / 2, this.height - (w - radius), width, w - radius);
    }

    // this.ctx.fillRect(0, 0, this.width, this.height);
    this.ctx.fillStyle = this.getColor(color, [0, 0, 0, this.height]);
    this.ctx.fill();
    this.ctx.closePath();
  }

  // TODO hover数据

}
